<style>
.panel-fieldlist .fieldlist dd ins{
width: 20%;
}
.panel-fieldlist .fieldlist dd input,.panel-fieldlist .fieldlist dd select{
width: 100%;
}
.list-group-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.groups{
    display: flex;align-items: center;
}
.house{
    display: flex;
}
.house .price{
    color: crimson;
}
.house .house-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    padding:10px 0;
}
.house .house-row .col{
    width: calc(100% / 3);
}
.title{
    font-weight: bold;font-size: 16px;
}
.list-group .list-group-item .label{
    padding: 5px 10px;
}
</style>
<div id="app">
    <div class="panel panel-default">
        <div class="panel-heading">订单信息</div>
        <div class="panel-body">
            <div class="row">
                <div class="col-xs-12 col-sm-6">
                    <ul class="list-group">
                        <input type="hidden" id="order_id" value="{$row.id}">
                        <input type="hidden" id="now-status" value="{$row.status}">
                        <input type="hidden" id="amount" value="{$row.amount}">
                        <li class="list-group-item">订单号：{$row.orderid}</li>
                        <li class="list-group-item" style="display: flex;justify-content: space-between;align-items: center;">
                            <div>
                                订单状态：
                                {if $row['status'] == 'created' || $row['status'] == 'refunding' || $row['status'] == 'checkouting'}
                                <span class="label label-danger">{$row.status_text}</span>
                                {/if}
                                {if $row['status'] == 'expired' || $row['status'] == 'canceled'}
                                <span class="label label-default">{$row.status_text}</span>
                                {/if}
                                {if $row['status'] == 'paid' || $row['status'] == 'finished'}
                                <span class="label label-success">{$row.status_text}</span>
                                {/if}
                                {if $row['status'] == 'checkined'}
                                <span class="label label-info">{$row.status_text}</span>
                                {/if}
                                {if $row['status'] == 'evaluate' || $row['status'] == 'toshopay'}
                                <span class="label label-warning">{$row.status_text}</span>
                                {/if}
                            </div>
                            {if $row['status'] == 'refunding'}
                            <div>
                                <button type="button" class="btn btn-success btn-status-click" data-status="canceled">去退款</button>
                            </div>
                            {/if}
                            <!-- 退房中 -->
                            {if $row['status'] == 'checkined' || $row['status'] == 'checkouting'}
                            <div>
                                <button type="button" class="btn btn-success btn-status-click" data-status="evaluate">已退房</button>
                            </div>
                            {/if}

                            {if $row['status'] == 'evaluate'}
                            <div>
                                <button type="button" class="btn btn-success btn-status-click" data-status="finished">已完成</button>
                            </div>
                            {/if}

                            {if $row['status'] == 'created'}
                            <div>
                                <button type="button" class="btn btn-success btn-status-click" data-status="paid">已支付</button>
                                <button type="button" class="btn btn-success btn-status-click" data-status="toshopay">到店付</button>
                                <button type="button" class="btn btn-primary btn-status-click" data-status="canceled">取消</button>
                            </div>
                            {/if}

                            {if $row['status'] == 'paid' || $row['status'] == 'toshopay' }
                            <div>
                                <button type="button" class="btn btn-success btn-status-click" data-status="checkined" data-now_status="{$row.status}">入住</button>
                                <button type="button" class="btn btn-primary btn-status-click" data-status="canceled">取消</button>
                            </div>
                            {/if}
                        </li>
                        <li class="list-group-item">下单时间：{$row.createtime|date="Y-m-d H:i:s",###}</li>
                        <li class="list-group-item">下单用户：{$row.user.nickname}（用户ID：{$row.user_id}）</li>
                        <li class="list-group-item">下单房间：{$row.source.name}（房间ID：{$row.source_id}）</li>
                        <li class="list-group-item">订单金额：￥{$row.amount}</li>
                        <li class="list-group-item">支付金额：￥{$row.payamount}</li>
                        <li class="list-group-item">优惠金额：￥{:$row['coupon_amount']?$row['coupon_amount']:0}</li>
                        <li class="list-group-item">
                            <span style="width: 140px;">退款金额：￥{:$row['outamount']?$row['outamount']:0}</span>
                            {if $row['paytype'] != 'system' && !empty($row['paytime']) && $row['outtype'] == 1}
                                <span>{$refunded_info}</span>
                            {/if}
                        </li>
                    </ul>
                </div>
                <div class="col-xs-12 col-sm-6">
                    <ul class="list-group">
                        <li class="list-group-item">使用优惠券：{if isset($row['user_coupon']) && isset($row['user_coupon']['coupon'])} {$row['user_coupon']['coupon']['name']} {else/} 无 {/if}</li>
                        <li class="list-group-item">支付方法：{$row.method}</li>
                        <li class="list-group-item">支付类型：{$row.paytype}</li>
                        <li class="list-group-item">支付时间：{notempty name="row.paytime"}{$row.paytime|date="Y-m-d H:i:s",###}{/notempty}</li>
                        <li class="list-group-item">入住日期：{notempty name="row.checkin_time"}{$row.checkin_time|date="Y-m-d",###}{/notempty}</li>
                        <li class="list-group-item">离开日期：{notempty name="row.leave_time"}{$row.leave_time|date="Y-m-d",###}{/notempty}</li>
                        <li class="list-group-item edit-list">
                            <div class="groups">
                                <span style="min-width: 100px;">实际入住日期：</span>
                                <div>{notempty name="row.actual_checkin_time"}{$row.actual_checkin_time|date="Y-m-d",###}{/notempty}</div>
                                <input class="form-control hide datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" type="text" value='{notempty name="row.actual_checkin_time"}{$row.actual_checkin_time|date="Y-m-d",###}{/notempty}'>
                            </div>
                            <div>
                                <a class="btn btn-success btn-edit" data-status="edit" href="javascript:;">编辑</a>
                                <a class="btn btn-primary hide btn-cancel" data-status="cancel" href="javascript:;">取消</a>
                                <a class="btn btn-info hide btn-save" data-status="save" data-field="actual_checkin_time" data-id="{$row.id}" href="javascript:;">保存</a>
                            </div>
                        </li>
                        <li class="list-group-item edit-list">
                            <div class="groups">
                                <span style="min-width: 100px;"> 实际离店日期：</span>
                                <div> {notempty name="row.actual_checkout_time"} {$row.actual_checkout_time|date="Y-m-d",###}{/notempty}</div>
                                <input class="form-control datetimepicker hide" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" type="text" value='{notempty name="row.actual_checkout_time"} {$row.actual_checkout_time|date="Y-m-d",###}{/notempty}'>
                            </div>
                            <div>
                                <a class="btn btn-success btn-edit" data-status="edit" href="javascript:;">编辑</a>
                                <a class="btn btn-primary hide btn-cancel" data-status="cancel" href="javascript:;">取消</a>
                                <a class="btn btn-info hide btn-save" data-status="save" data-field="actual_checkout_time" data-id="{$row.id}" href="javascript:;">保存</a>
                            </div>
                        </li>
                        <li class="list-group-item edit-list">
                            <div class="groups">
                                <span style="min-width: 45px;">备注：</span>
                                <div>{$row.memo}</div>
                                <input class="form-control hide" type="text" value="{$row.memo}">
                            </div>
                            <div>
                                <a class="btn btn-success btn-edit" data-status="edit" href="javascript:;">编辑</a>
                                <a class="btn btn-primary hide btn-cancel" data-status="cancel" href="javascript:;">取消</a>
                                <a class="btn btn-info hide btn-save" data-status="save" data-field="memo" data-id="{$row.id}" href="javascript:;">保存</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            住客信息
        </div>
        <div class="panel-body panel-fieldlist">
            <div class="col-xs-12 col-sm-12">
                {if $row['status'] != 'canceled' && $row['status'] != 'expired' && $row['status'] != 'finished'}
                <dl class="fieldlist" data-template="lodgerstpl" data-name="row[lodgers]">
                    <dd>
                        <ins>{:__('姓名')}</ins>
                        <ins>{:__('手机号码')}</ins>
                        <ins>{:__('证件类型')}</ins>
                        <ins>{:__('证件号码')}</ins>
                    </dd>
                    <dd>
                        <a href="javascript:;" class="btn btn-sm btn-success btn-append">
                            <i class="fa fa-plus"></i>
                            {:__('Append')}
                        </a>
                        <a href="javascript:;" class="btn btn-sm btn-danger btn-save-lodgers">
                            <i class="fa fa-plus"></i>
                            {:__('保存')}
                        </a>
                    </dd>
                    <textarea name="row[lodgers]" class="form-control hide" id="lodgers" cols="30" data-id="{$row.id}" rows="5">{$lodgers|htmlentities}</textarea>
                </dl>
                <script id="lodgerstpl" type="text/html">
                    <dd class="form-inline">
                        <ins><input type="text" name="<%=name%>[<%=index%>][name]" class="form-control" value="<%=row.name%>" placeholder="姓名" size="10"/></ins>
                        <ins><input type="text" name="<%=name%>[<%=index%>][mobile]" class="form-control" value="<%=row.mobile%>" placeholder="手机号码"/></ins>
                        <ins>
                            <select id="c-type" class="form-control selectpicker" name="<%=name%>[<%=index%>][type]">
                                <option value="0" <%=row.type=='0'?'selected':''%> >身份证</option>
                                <option value="1" <%=row.type=='1'?'selected':''%> >护照</option>
                                <option value="2" <%=row.type=='2'?'selected':''%> >港澳通行证</option>
                                <option value="3" <%=row.type=='3'?'selected':''%> >台胞证</option>
                            </select>
                        </ins>
                        <ins><input type="text" name="<%=name%>[<%=index%>][idnumber]" class="form-control" value="<%=row.idnumber%>" placeholder="证件号码"/></ins>
                        <!--下面的两个按钮务必保留-->
                        <span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span>
                        <span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span>
                    </dd>
                </script>
                {else/}

                {php} $lodgersArr = (array)json_decode($lodgers,true); {/php}
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>姓名</th>
                            <th>手机号码</th>
                            <th>证件类型</th>
                            <th>证件号码</th>
                        </tr>
                    </thead>
                    <tbody>
                        {foreach name="lodgersArr" item="item"}
                        <tr>
                            <th scope="row">{$key+1}</th>
                            <td>{$item.name}</td>
                            <td>{$item.mobile}</td>
                            <td>{$item.type_text}</td>
                            <td>{$item.idnumber}</td>
                        </tr>
                        {/foreach}
                    </tbody>
                </table>
                {/if}
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">房间信息</div>
        <div class="panel-body">
            <div class="house">
                <img width="270" height="150" src="{$row.source.images_text[0]}" alt="">
                <div style="margin-left: 30px;width: 100%;">
                    <div class="title">{$row.source.name}</div>
                    <div class="house-row">
                        <div class="col">
                            价格：<span class="price">￥{$row.source.price}</span>
                        </div>
                        <div class="col">
                            浏览量：<span class="price">{$row.source.views}</span>
                        </div>
                        <div class="col">
                            可住人数：<span class="price">{$row.source.livenums}</span>人
                        </div>
                    </div>
                    <div class="house-row">
                        <div class="col">
                            房屋面积：<span class="price">{$row.source.area}</span>㎡
                        </div>
                        <div class="col">
                            房间号：<span class="price">{$row.source.room}</span>
                        </div>
                        <div class="col">
                            支付方式：<span class="price">{if $row.source.to_shop_pay==1}到店付{else/}在线支付{/if}</span>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
